<template>
  <div class="wrapper">
    <div class="item" v-for="(item, i) in listData" @click="gotoGroupCodeLabel(item)" :key="i">
      <div class="image">
        <img alt="图片无效" v-if="item.member_id != 0" :src="item.has_one_member ? item.has_one_member.avatar_image : ''" />
        <img v-else :src="shop_log" alt="" />
      </div>
      <div class="content">
        <div class="text">
          <div class="name">{{ item.code_name }}</div>
          <div class="desc">{{ item.code_guide }}</div>
        </div>
        <div class="opt">
          <div class="btn">加入</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: function() {}
    },
    shop_log: {
      type: String,
      default: function() {}
    }
  },
  data() {},
  methods: {
    gotoGroupCodeLabel(item) {
      this.$router.push(this.fun.getUrl("groupCodeLabel", {}, { groupCodeId: item.id }));
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.wrapper {
  padding: 0.875rem 0.75rem;

  .item {
    // width: 21.875rem;
    // height: 5.031rem;
    width: 100%;
    padding:0.9375rem 0.625rem;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    margin:0 0 10px 0;

    .image {
      width: 3.75rem;

      img {
        width: 3.5rem;
        height: 3.5rem;
        border:1px solid #D6D6DC;
        border-radius: 50%;
      }
    }

    .content {
      width: 100%;
      box-sizing: border-box;
      flex: 1;
      margin-left: 6px;
      height: 3.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;

      .text {
        display: flex;
        flex-direction: column;

        .name {
          font-weight: bold;
          color: #000000;
          font-size: 0.9375rem;
          padding:0 0 0.25rem 0;
          
        }

        .desc {
          width: 12.5rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.8125rem;
          font-weight: 400;
          color: #6E6E79;
        }
      }

      .opt {
        display: flex;
        align-items: center;
        // min-width: 3.25rem;
        
        
        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8125rem;
          line-height: 0.8125rem;
          padding:0.5rem 0.8125rem;
          min-width: 3.375rem;
          color: #fff;
          background: var(--themeBaseColor);
          border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
        }
      }
    }
  }
}
</style>
